<template>
  <div class="main-wraper">
    <div class="search-wraper">
      <el-button
        type="danger"
        class="search-btn"
        icon="el-icon-delete"
        :disabled="selectionList.length == 0"
        @click="batchDeleteBtn"
        >批量删除</el-button
      >
      <el-button
        type="primary"
        class="download-btn"
        icon="el-icon-upload"
        :loading="uploading"
        @click="exportBtn"
        >导入系统</el-button
      >
    </div>
    <el-table
      class="excel-table"
      v-loading="uploading"
      ref="Table"
      stripe
      :height="tableHeight"
      element-loading-text="正在导入，请稍候"
      current-row-key="id"
      row-key="id"
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        v-for="(item, index) in columnList"
        :prop="item.key"
        :sortable="item.sortable"
        :label="item.name"
        :width="item.width"
        :key="index"
        :formatter="formatterColumn"
      >
      </el-table-column>
      <el-table-column width="80" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            class="delete-btn"
            @click="deleteBtn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :current-page="currentPage"
      :pager-count="pagerCount"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script>
import _ from "underscore";
export default {
  name: "preview",
  components: {},
  data() {
    let that = this;
    return {
      uploading: false,
      tableHeight: 400,
      columnList: [
        {
          name: "职位名称",
          key: "name",
          width: 200,
        },
        {
          name: "工作地点",
          key: "location",
          width: 120,
        },
        {
          name: "薪水待遇",
          key: "salary",
          width: 120,
        },
        {
          name: "公司名称",
          key: "companyName",
          width: 240,
        },
        {
          name: "公司标签",
          key: "companyTags",
          width: 200,
        },
        {
          name: "公司规模",
          key: "companyScale",
          width: 120,
        },
        {
          name: "HR",
          key: "hr",
          width: 120,
        },
        {
          name: "HR职位",
          key: "hrjob",
          width: 120,
        },
        {
          name: "链接",
          key: "link",
          width: 200,
        },
      ],
      tableData: [],
      pageSizes: [10, 20, 50, 100],
      pagerCount: 10,
      pageSize: 50,
      currentPage: 1,
      totalCount: 0,
      selectionList: [],
    };
  },
  methods: {
    formatterColumn(row, column, value, index) {
      let list = ["companyTags"];
      if (column.property == "link") {
        return (
          <a class="j_link" href={value} target="_blank">
            {value}
          </a>
        );
      }
      if (!list.includes(column.property)) return value;
      return value.map((name) => {
        return <el-tag class="name">{name}</el-tag>;
      });
    },

    exportBtn() {
      let that = this;
      this.$confirm(
        `此操作将会把当前${this.totalCount}条数据导入到系统内, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.uploadData();
      });
    },
    uploadData() {
      this.uploading = true;
    },
    deleteBtn(data) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          const index = this.tableList.findIndex((item) => item.id == data.id);
          this.tableList.splice(index, 1);
          this.resetTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    batchDeleteBtn() {
      this.$confirm("确认批量删除已选中的数据么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.selectionList.forEach((select) => {
            const index = this.tableList.findIndex(
              (item) => item.id == select.id
            );
            this.tableList.splice(index, 1);
          });
          this.resetTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetTableData() {
      let that = this;
      that.totalCount = this.tableList.length;
      that.currentPage = this.currentPage || 1;
      that.loading = false;
      that.setTableData();
      that.updateCacheTableData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.setTableData();
    },
    handleCurrentChange(current) {
      this.currentPage = current;
      this.setTableData();
    },
    handleSelectionChange(list) {
      this.selectionList = list;
    },
    setTableData() {
      let that = this;
      let start = (that.currentPage - 1) * that.pageSize;
      let end = start + that.pageSize;
      this.tableData = this.tableList.slice(start, end);
      this.$nextTick(() => {
        this.$refs.Table.bodyWrapper.scrollTop = 0;
      });
    },
    importTableData(list) {
      let tableData = [];
      if (list && list.length > 0) {
        tableData = list;
      } else {
        const temData = localStorage.getItem("temData");
        if (temData) {
          tableData = JSON.parse(temData);
        }
      }
      this.tableList = tableData.map((item, index) => {
        item.id = index + 1;
        return item;
      });
      this.resetTableData();
    },
    updateCacheTableData() {
      const tempData = JSON.stringify(this.tableList);
      localStorage.setItem("temData", tempData);
    },
    bindChromeEvent() {
      this.importTableData();
      chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        console.log("接收到来自爬虫的数据", request);
        if (request.type == "preview") {
          this.importTableData(request.jobList);
          sendResponse();
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      //this.importTableData();
    });
  },
  created() {
    this.tableHeight = window.innerHeight - 190;
    this.bindChromeEvent();
  },
};
</script>
<style lang="less" scoped>
.main-wraper {
  /deep/.search-wraper {
    .el-input-group {
      width: 300px;
    }
    .el-select .el-input {
      width: 120px;
    }
    .search-btn {
      margin-left: 0px;
    }
    .import-btn {
      margin-left: 20px;
    }
    .download-btn {
      float: right;
    }
  }
  padding: 20px;
  padding-bottom: 0;
}
.main-wraper /deep/ .el-dialog__body {
  font-size: 16px;
}
.main-wraper .el-button {
  position: relative;
}
.main-wraper .el-tag.name {
  margin: 2px;
  font-size: 12px;
  padding: 0 5px;
  line-height: 24px;
  height: 24px;
}
.el-pagination {
  text-align: center;
  padding: 20px 0 10px;
}
.el-table /deep/ .el-table__empty-block {
  min-height: 300px;
}
.el-table /deep/ .j_link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.excel_btn {
  opacity: 0;
  cursor: pointer;
}
.excel-table {
  margin-top: 20px;
}
</style>
